<template>
  <div class="category-page">
    <!-- 按钮集合 -->
    <div class="page-btns">
      <el-button type="primary" :icon="Plus" @click="saveCategory_btn">添加商品分类</el-button>
      <el-button type="success" :icon="Delete" :disabled="selectedCategoryIds.length === 0" @click="deleteCategoryBatch_btn">批量删除商品分类</el-button>
    </div>
    <!-- 商品分类表部分 -->
    <el-table :data="categoryList" border style="width: 100%" @select-all="tableSelectChange" @select="tableSelectChange">
      <el-table-column type="selection" width="50" />
      <el-table-column type="index" label="序号" width="55" />
      <el-table-column prop="categoryId" label="商品分类ID" />
      <el-table-column prop="categoryName" label="商品分类名称" />
      <el-table-column prop="updateTime" label="商品分类更新时间" />
      <el-table-column prop="createTime" label="商品分类创建时间" />
      <el-table-column label="操作" width="130">
        <template #="{row, $index}">
          <el-button :icon="Edit" type="primary" title="编辑商品分类" @click="editCategory_btn(row)"></el-button>
          <el-popconfirm title="确定要删除该商品分类吗?" @confirm="deleteCategory_btn(row)">
            <template #reference>
              <el-button :icon="Delete" type="info" title="删除商品分类"></el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器部分 -->
    <el-pagination background layout="prev, pager, next, total, sizes, ->, jumper" :total="categoryTotal" :page-sizes="[3,5,10,20,30,50]" :default-current-page="pagination_page" :default-page-size="pagination_size" @change="pagination_change" class="page-pagination"/>
    <!-- drawer_dialog抽屉 弹出层 部分 -->
    <el-drawer ref="drawerRef" v-model="drawer_dialog" :title="drawer_dialog_state === 0 ? '添加商品分类' : '修改商品分类'" :before-close="drawerDialogHandleClose" direction="ttb" class="page-drawerDialog">
      <div class="drawerDialog_content">
        <el-form ref="userInfoForms">
          <el-form-item label="商品名称:" label-width="100px">
            <el-input v-model="categoryInfo.categoryName" placeholder="请输入商品分类名称"></el-input>
          </el-form-item>
          <el-form-item label="" label-width="100px">
            <div class="drawer-btns">
              <el-button @click="drawerDialogCancel_btn">取消</el-button>
              <el-button type="primary" :loading="isLoadingBtn" @click="drawerDialogSave_btn">提交</el-button>
            </div>
          </el-form-item>
        </el-form>
      </div>
    </el-drawer>
  </div>
</template>

<script setup lang='ts'>
import { ref, reactive, onMounted } from "vue";
//引入ElementPlus组件
import { ElTable, ElTableColumn, ElButton, ElPagination, ElInput, ElMessage, ElDrawer, ElForm, ElFormItem, ElPopconfirm, ElMessageBox } from "element-plus";
import { Delete, Edit, Plus } from '@element-plus/icons-vue';
//引入请求函数
import { reqCommodityCategoryList, reqSaveCommodityCategory, reqUpdateCommodityCategory, reqDeleteCommodityCategory, reqDeleteCommodityCategoryBatch } from "@/api/category/index.ts";
//引入类型约束
import type { categoryType } from "@/api/category/type.ts";

//表格商品分类数据
let categoryList = ref([]);
//商品分类数据总条数
let categoryTotal = ref(0);
//商品分类信息表单
let categoryInfo = reactive<categoryType>({
  categoryId:0,
  categoryName:"",
  createTime:"",
  updateTime:""
});
//商品分类表格中选择的商品分类列表信息
let selectedCategoryIds = ref<number[]>([]);

//分页器相关数据
let pagination_page = ref(1);
let pagination_size = ref(3);

//table商品分类表的select的chage事件
const tableSelectChange = (categoryList:categoryType[]) => {
  selectedCategoryIds.value = categoryList.map(item => item.categoryId);
}

//drawer_dialog相关数据
let drawer_dialog = ref(false);
let drawer_dialog_state = ref(0);  //drawer_dialog状态 0-添加商品分类 1-修改商品分类
let isLoadingBtn = ref(false);  //drawer_dialog提交按钮loading效果
//分页器的change事件
const pagination_change = (page:number, pageSize:number) => {
  pagination_page.value = page;
  pagination_size.value = pageSize;
  //获取商品分类数据
  getCommodityCategoryList(page, pageSize);
}

//商品分类表中相关按钮事件
const editCategory_btn = (category:categoryType) => {
  //打开drawer_dialog
  drawer_dialog.value = true;
  //修改drawer_dialog_state状态
  drawer_dialog_state.value = 1;
  //赋值
  categoryInfo.categoryName = category.categoryName;
  categoryInfo.categoryId = category.categoryId;
  categoryInfo.createTime = category.createTime;
  categoryInfo.updateTime = category.updateTime;
}
const deleteCategory_btn = async (category:categoryType) => {
  if(category.categoryId === null || category.categoryId === undefined)return;
  let res = await reqDeleteCommodityCategory(category.categoryId);
  if(res.code === 200) {
    ElMessage({type:"success",message:"商品分类删除成功!"});
    //重新请求商品分类列表数据
    getCommodityCategoryList(pagination_page.value, pagination_size.value);
  } else {
    ElMessage({type:"error",message:res.msg});
  }
  console.log('商品分类删除api',res);
}

//顶部按钮集合相关事件
const saveCategory_btn = () => {
  drawer_dialog.value = true;
  //修改dialog状态
  drawer_dialog_state.value = 0;
}
const deleteCategoryBatch_btn = async () => {
  if(selectedCategoryIds.value.length === 0) return ElMessage({type:"success",message:"请选择商品分类!"});
  //弹出messageBox提示
  ElMessageBox.confirm('确定要删除这些商品分类吗?','提示',{confirmButtonText: '确定',cancelButtonText: '取消',type: 'warning',}).then(async () => {
      //向服务器发请求批量删除商品分类
      let res = await reqDeleteCommodityCategoryBatch(selectedCategoryIds.value);
      if(res.code === 200) {
        ElMessage({type:"success",message:"商品分类批量删除成功!"});
        //重新请求分类列表数据
        getCommodityCategoryList(pagination_page.value,pagination_size.value);
        //置空选择的分类ids
        selectedCategoryIds.value = [];
      } else {
        ElMessage({type:"error",message:res.msg});
      }
      console.log("批量删除商品分类api",res);
    }).catch(() => {
      ElMessage({type: 'info',message: '取消删除!'})
  })
}

//drawer_dialog相关按钮事件
const drawerDialogHandleClose = () => {
  //关闭drawer_dialog
  drawer_dialog.value = false;
  //清空数据
  categoryInfo.categoryId = 0;
  categoryInfo.categoryName = "";
  categoryInfo.createTime = "";
  categoryInfo.updateTime = "";
  //重置drawer_dialog_state状态
  drawer_dialog_state.value = 0;
}
const drawerDialogCancel_btn = () => {
  drawerDialogHandleClose();
}
const drawerDialogSave_btn = async () => {
  if(categoryInfo.categoryName.trim() === "")return;

  //发请求更新或者添加商品分类
  if(drawer_dialog_state.value === 0){
    //添加一条商品分类数据
    let res = await reqSaveCommodityCategory(categoryInfo.categoryName);
    if(res.code === 200){
      ElMessage({type:"success",message:"商品分类添加成功!"});
    } else {
      ElMessage({type:"error",message:res.msg});
    }
    console.log("添加商品分类api",res);
  } else if (drawer_dialog_state.value === 1) {
    //修改商品分类信息
    let res = await reqUpdateCommodityCategory(categoryInfo);
    if(res.code === 200){
      ElMessage({type:"success",message:"商品分类修改成功!"});
    } else {
      ElMessage({type:"error",message:res.msg});
    }
    console.log("修改商品分类api",res);
  }
  //关闭drawer_dialog
  drawerDialogHandleClose();
  //重新请求数据
  getCommodityCategoryList(pagination_page.value, pagination_size.value);
}

//获取商品分类数据(支持分页)
const getCommodityCategoryList = async (page:number = 1, pageSize:number = 3) => {
  let res = await reqCommodityCategoryList(page, pageSize);
  if(res.code === 200) {
    categoryList.value = res.data.rows;
    categoryTotal.value = res.data.total;
    ElMessage({type:"success",message:"商品分类数据获取成功!"})
  } else {
    ElMessage({type:"error",message:res.msg});
  }
  console.log("分页获取商品分类数据api",res);
}

//vue生命周期
onMounted(() => {
  getCommodityCategoryList();
})
</script>

<style lang='scss' scoped>
.category-page{
  width: 100%;
  height: 100%;

  .page-btns{
    width: 100%;
    margin-bottom: 20px;
  }

  .page-pagination{
    margin-top: 30px;
  }
}
</style>